<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>城市下拉选择组件</title>
	<link rel="stylesheet" type="text/css" href="css/city-picker.css">
</head>

<body>
	<h2>模拟城市-无联动/无搜索</h2>
	<div class="city-picker-selector" id="city-picker-selector"></div><!-- end .city-picker-selector -->

	<h2>模拟城市-联动/搜索/键盘操作/二级城市</h2>
	<div class="city-picker-selector" id="city-picker-search"></div><!-- end .city-picker-selector -->

	<h2>原生城市-联动</h2>
	<div class="city-picker-select"></div><!-- end .city-picker-select -->


	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/citydata.min.js"></script>
	<script type="text/javascript" src="js/cityPicker-1.1.8.js"></script>
	<script type="text/javascript">
		$(function () {

			// 模拟城市-无联动/无搜索
			var selector1 = $('#city-picker-selector').cityPicker({
				dataJson: cityData,
				renderMode: true,
				search: false,
				autoSelected: false,
				code: 'cityCode',
				onChoiceEnd: function() {
					console.log(this.values)
				}
			});

			// 省份选择的回调
			$('#city-picker-selector').on('choose-province.citypicker', function(event, tagert, values) {
				console.log(values);
			});

			// 城市选择的回调
			$('#city-picker-selector').on('choose-city.citypicker', function(event, tagert, values) {
				console.log(values);
			});

			// 城市选择的回调
			$('#city-picker-selector').on('choose-district.citypicker', function(event, tagert, values) {
				console.log(values);
			});

			// 设置城市
			selector1.setCityVal('广东省, 广州市, 天河区');
			//selector.setCityVal('天河区, 广州市, 广东省');

			// 获取值
			console.log('模拟-'+ JSON.stringify(selector1.getCityVal()));

			// 模拟城市-联动/搜索/键盘操作
			var selector2 = $('#city-picker-search').cityPicker({
				dataJson: cityData,
				renderMode: true,
				search: true,
				autoSelected: true,
				keyboard: true,
				level: 2,
				onChoiceEnd: function() {
					console.log(this.values)
				}
			});

			// 省份选择的回调
			$('#city-picker-search').on('choose-province.citypicker', function(event, tagert, values) {
				console.log(values);
			});

			// 城市选择的回调
			$('#city-picker-search').on('choose-city.citypicker', function(event, tagert, values) {
				console.log(values);
			});

			// 城市选择的回调
			$('#city-picker-search').on('choose-district.citypicker', function(event, tagert, values) {
				console.log(values);
			});

			//原生城市-联动
			var select = $('.city-picker-select').cityPicker({
				dataJson: cityData,
				renderMode: false,
				autoSelected: true,
				onChoiceEnd: function() {
					console.log(this.values)
				}
			});

			// 设置城市
			select.setCityVal('山西省, 太原市, 小店区');

			// 获取城市
			console.log('原生-'+ JSON.stringify(select.getCityVal()));

		});
	</script>
</body>

</html>